<template>
  <div>
    <div class="header_box">
      <!-- locatHeader -->
      <div class="locatHeader_one">
        <div class="iconfont" @click="gotoup">&#xe60d;</div>
        <div class="mp-header-title">城市选择</div>
      </div>
      <div class="locatHeader_two">
        <div class="two_item_bxo">
          <div :class="jinnindex===1?'two_item_bxo_con_one':'two_item_bxo_con'" @click="jinn(1)">境内</div>
          <div
            :class="jinnindex===2?'two_item_bxo_con_one':'two_item_bxo_con'"
            @click="jinn(2)"
          >境外港澳台</div>
        </div>
      </div>
    </div>
    <!-- 搜索内容 -->
    <div class="header_box_input" v-show="show">
      <input type="text" class="input_box" placeholder="请搜索要搜索的内容" v-model="keyword" />
    </div>
    <div class="search-content" ref="search" v-show="keyword">
			<ul>
				<li class="search-item border-bottom" v-for="item in list" :key="item.id" @click="handleCityClick(item.name)">  
					{{ item.name}}  
				</li>
				<li class="search-item border-bottom" v-show="hasNoData">
				  没有找到匹配数据
				</li>
			</ul>
		</div>
  </div>
</template>

<script>
export default {
   props: {
    cities: Object,   
  },
  data() {
    return {
      jinnindex: 1,
      show: false,
      isShow: false,
      keyword:"",
      list:[],
      hasNoData:false
    };
  },

  methods: {
    jinn(val) {
      this.jinnindex = val;
      if (val == 2) {
        this.show = true;
        this.$emit("bian", val);
        // this.isShow = false

      } else if (val == 1) {
        this.show = false;
        // this.isShow = true
        this.$emit("bian", val);

      }
    },
    gotoup(){
      window.history.back()
    },
    handleCityClick(kewVal){
      this.$store.dispatch('changCity',kewVal)
      this.keyword = ""
      this.$router.push("/") 
    }
  },
  watch:{
    keyword(odlValue,newValue){
      if(!this.keyword){
        this.list=[]
        return
      }
      console.log(odlValue,"=========",newValue);
      //函数节流
				if (this.timer) {
					clearTimeout(this.timer)
				}
			
				this.timer = setTimeout(()=>{
					const result = []
					for(let i in this.cities ){
						this.cities[i].forEach((value)=>{
							//如果我们能从name  spell当中搜索到 我们就把它添加到result当中
							if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword)> -1) {
								result.push(value)
							}                       
						})
					}
					this.list = result
          if(this.keyword==""){
            this.hasNoData= false
          }else{
            this.hasNoData= true
          }
          if(this.list.length==0){
            this.hasNoData= true
          }else{
            this.hasNoData= false
          }
          // console.log(this.list);
				},100)
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

.locatHeader_one {
  width: 100%;
  display: flex;
  line-height: 1.1rem;
  background: $bgColor;
  color: #fff;
  // height 1.1rem
}

.mp-header-title {
  overflow: hidden;
  margin: 0.1rem 2.8rem;
  line-height: 0.88rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.32rem;
  text-align: center;
  color: #fff;
}

.locatHeader_two {
  // width: 98%;
  background: $bgColor;
  color: #fff;
  line-height: 0.6rem;
  padding: 0.1rem;
  box-sizing: border-box;

  .two_item_bxo {
    width: 90%;
    margin: 0 auto;
    display: flex;

    .two_item_bxo_con {
      width: 50%;
      text-align: center;
      background: $bgColor;
      border: 0.01rem solid #ffff;
    }

    .two_item_bxo_con_one {
      width: 50%;
      text-align: center;
      background: #ffffff;
      color: #999;
    }
  }
}

.header_box_input 
  width: 100%;
  // height: 1.6rem;
  // background: pink;

  // display none
  .input_box {
    width: 90%;
    padding: 0.2rem;
    box-sizing: border-box;
    margin: 2.5%;
    margin-left 0.32rem
  }
  .search-content
    z-index: 1
    overflow: hidden
    position: absolute
    top: 1.58rem
    left: 0
    right: 0
    bottom: 0
    background: #fff
    .search-item
      line-height: 0.7rem
      text-indent 0.4rem
      // padding-left: .2rem
      background: #fff
      color: #666

</style>